<!-- 这个组件是homepage首页里的成员介绍页面，详细展示了老师，在校生、毕业生的卡片信息，点击后会跳转到详细信息 -->
<template>
  <el-row class="my-el-row" justify="space-evenly" :gutter="20">
    <el-col :span="6">
      <el-card
        class="professor-card"
        shadow="always"
        :body-style="{ padding: '20px' }"
      >
        <!-- 头像 + 基本信息 -->
        <div class="header">
          <el-image
            src="./images/huyaoguang.png"
            style="
              /* width: 100%; */
              height: 200px;
              object-fit: cover;
              border-radius: 8px;
            "
          />
        </div>
        <div class="info">
          <div class="name">胡耀光</div>
          <div class="title">博士生导师</div>
          <div></div>

          <div class="desc">
            课题组负责人，工学博士，教授，智能制造工程专业（学校首批新工科专业）责任教授，工业与智能系统工程研究所所长，北京市高等学校教学名师。
          </div>
        </div>
        <!-- 研究方向 -->
        <div class="direction">
          <div class="label">研究方向：</div>
          <div class="label">
            <el-tag type="primary" size="small">智能制造工程</el-tag>
            <span>、</span>
            <el-tag type="primary" size="small">工业工程</el-tag>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="footer">
          <el-button
            type="primary"
            text
            size="small"
            @click="goToTeacherPage('HuYaoguangProfile')"
          >
            查看详细信息 →
          </el-button>
        </div>
      </el-card>
    </el-col>

    <el-col :span="6">
      <el-card
        class="professor-card"
        shadow="always"
        :body-style="{ padding: '20px' }"
      >
        <!-- 头像 + 基本信息 -->
        <div class="header">
          <el-image
            src="./images/yangxiaonan.jpg"
            style="
              /* width: 100%; */
              height: 200px;
              object-fit: cover;
              border-radius: 8px;
            "
          />
        </div>
        <div class="info">
          <div class="name">杨晓楠</div>
          <div class="title">博士生导师</div>
          <div></div>

          <div class="desc">
            北京理工大学机械与车辆学院副教授，作为项目负责人主持科技部重点研发项目课题、国家自然科学基金青年基金及教育部产学合作协同育人等项目。
          </div>
        </div>
        <!-- 研究方向 -->
        <div class="direction">
          <div class="label">研究方向：</div>
          <div class="label">
            <el-tag type="primary" size="small">智能人机交互</el-tag>
            <span>、</span>
            <el-tag type="primary" size="small">人因工程</el-tag>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="footer">
          <el-button
            type="primary"
            text
            size="small"
            @click="goToTeacherPage('YangXiaonanProfile')"
          >
            查看详细信息 →
          </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card
        class="professor-card"
        shadow="always"
        :body-style="{ padding: '20px' }"
      >
        <!-- 头像 + 基本信息 -->
        <div class="header">
          <el-image
            src="./images/zhangyanzi.jpeg"
            style="
              /* width: 100%; */
              height: 200px;
              object-fit: cover;
              border-radius: 8px;
            "
          />
        </div>
        <div class="info">
          <div class="name">张延滋</div>
          <div class="title">硕士导师</div>
          <div></div>

          <div class="desc">
            北京理工大学机械与车辆学院助理教授。目前主持国家自然科学基金青年项目1项、面上项目1项、结题博士后科学基金面上项目1项。
          </div>
        </div>
        <!-- 研究方向 -->
        <div class="direction">
          <div class="label">研究方向：</div>
          <div class="label">
            <el-tag type="primary" size="small">运筹优化</el-tag>
            <span>、</span>
            <el-tag type="primary" size="small">最优化理论</el-tag>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="footer">
          <el-button
            type="primary"
            text
            size="small"
            @click="goToTeacherPage('ZhangYanziProfile')"
            >> 查看详细信息 →
          </el-button>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card
        class="professor-card"
        shadow="always"
        :body-style="{ padding: '20px' }"
      >
        <!-- 头像 + 基本信息 -->
        <div class="header">
          <el-image
            src="./images/wenjingqian.png"
            style="
              /* width: 100%; */
              height: 200px;
              object-fit: cover;
              border-radius: 8px;
            "
          />
        </div>
        <div class="info">
          <div class="name">闻敬谦</div>
          <div class="title">硕士导师</div>
          <div></div>

          <div class="desc">
            北京理工大学机械与车辆学院工业工程硕士生导师,作为课题负责人承担国家重点研发、ku国防基础科研等项目，为装备制造企业研发生产管理、运维服务等系统，获得国防科技进步奖二等奖、企业管理进步奖等。
          </div>
        </div>
        <!-- 研究方向 -->
        <div class="direction">
          <div class="label">研究方向：</div>
          <div class="label">
            <el-tag type="primary" size="small">工业工程</el-tag>
            <span>、</span>
            <el-tag type="primary" size="small">机械制造及其自动化</el-tag>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="footer">
          <el-button
            type="primary"
            text
            size="small"
            @click="goToTeacherPage('WenJingQian')"
            >> 查看详细信息 →
          </el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-divider />
  <div class="member-list">
    <el-row :gutter="20">
      <el-col v-for="(member, index) in member_list" :key="index" :span="6">
        <el-card
          class="professor-card"
          shadow="hover"
          :body-style="{ padding: '20px' }"
        >
          <!-- 头像 -->
          <div class="header">
            <el-image
              :src="`${$baseURL}${member.avatar_url}`"
              fit="cover"
              style="width: 120px; height: 120px; border-radius: 50%"
            />
          </div>

          <!-- 基本信息 -->
          <div class="info">
            <div class="name">{{ member.full_name }}</div>
            <div style="text-align: center; padding: 5px">
              <el-tag style="margin-right: 6px">
                {{ member.degree || "——" }}
              </el-tag>
              <el-tag type="warning">
                {{ member.acad_status || "——" }}
              </el-tag>
            </div>

            <div class="title">{{ member.workplace || "——" }}</div>

            <div class="desc">
              {{ member.introduction }}
            </div>
          </div>

          <div style="display: flex; overflow: hidden">
            <template v-if="member.tag && member.tag.trim() !== ''">
              <el-tag
                v-for="(tag, index) in member.tag.split('-')"
                :key="index"
                type="success"
                style="
                  margin-left: 6px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                "
              >
                {{ tag }}
              </el-tag>
            </template>
            <el-tag
              v-else
              type="success"
              style="
                margin-left: 6px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              "
            >
              这家伙很懒什么都没留下
            </el-tag>
          </div>

          <!-- 按钮 -->
          <div class="footer">
            <el-button
              type="primary"
              text
              size="small"
              @click="goToDetailPage(member.full_name)"
            >
              查看详细信息 →
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import api from "@/utils/api";
const router = useRouter();
// 跳转到老师详情页面并传递参数
const goToTeacherPage = (name) => {
  router.push({
    name,
  });
};

// 拉取用户数据
const member_list = ref([]);

function fetchMembers() {
  api
    .get("/profile/list")
    .then((res) => {
      if (res.data.code === 200) {
        member_list.value = res.data.data; // 注意这里用 .value
        // console.log(member_list.value);
      }
    })
    .catch((err) => {
      console.error("获取用户失败:", err);
    });
}

const goToDetailPage = (name) => {
  router.push({
    name: "DetailPage",
    params: { name },
  });
};

// 组件挂载时调用
onMounted(() => {
  fetchMembers();
});
</script>

<style scoped>
.label {
  padding-left: 10px;
}
.professor-card {
  border-radius: 12px;
  margin-bottom: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.professor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.header {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.info .name {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.info .title {
  font-size: 14px;
  color: #909399;
  margin: 4px 0;
  text-align: center;
}
.info .desc {
  padding: 10px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  height: 70px;
  line-height: 20px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* WebKit 私有 */
  line-clamp: 4; /* 标准属性，增加兼容性 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.direction {
  margin: 10px 0;
}
.footer {
  text-align: right;
  margin-top: 12px;
}
</style>
